<!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <meta charset="UTF-8">
    <style>
        .list div{
            display: block;
            background-color: #ff0000;
            color: #FFFFFF;
            margin: 10px;
            padding: 10px;
            float: left;
        }
    </style>
</head>
<body>
    <textarea></textarea>
    <button type="button">左侧入</button>
    <button type="button">右侧入</button>
    <button type="button">左侧出</button>
    <button type="button">右侧出</button>
    <input type="text">
    <button type="submit">查询</button>
    <div class="list"></div>
<script>
    var startStr = "<span style=\"color:blue\">";
    var endStr = "</span>";
    //对Textarea值进行筛选
    function cleanArray(data)
    {
        var myArray = [];
        for (var i=0,l=data.length;i<l;i++)
        {
            if (data[i]==="")
            {
                continue;
            }
            myArray.push(data[i]);
        }
        return myArray;
    }
    //获取已产生的数组
    function getData()
    {
        var divObj = document.getElementsByClassName("list");
        var list = divObj[0].getElementsByTagName("div");
        var myArray = [];
        for (var i=0,l=list.length;i<l;i++)
        {
            myArray.push(list[i].innerHTML);
        }
        return myArray;
    }
    function render(data)
    {
        var divObj = document.getElementsByClassName("list");
        var myArray = [];
        for (var i=0,l=data.length;i<l;i++)
        {
            var str = "<div>" + data[i]+"</div>";
            myArray.push(str);
        }
        divObj[0].innerHTML = myArray.join("");
    }
    //获取TextArea的值
    function getTextArea()
    {
        var text = document.getElementsByTagName("textarea")[0].value;
        var temp = text.replace(/[^0-9A-Za-z]/g,",");
        var inputArray = temp.split(",");
        var result = cleanArray(inputArray);
        return result;
    }
    function getNewData(data)
    {
        var myArray = [];
        for (var i=0,l=data.length;i<l;i++)
        {
            var s = data[i].replace(startStr,"");
            var t = s.replace(endStr,"");
            myArray.push(t);
        }
        return myArray;
    }
    window.onload = function ()
    {
        var btnArray = document.getElementsByTagName("button");
        btnArray[0].onclick = function()
        {
            var data = getData();
            var result = getTextArea();
            for (var i=0,l=result.length;i<l;i++)
            {
                var input = result[i];
                if(!isNaN(input))
                {
                    data.unshift(input);
                }
            }
            render(data);
        }
        btnArray[1].onclick = function()
        {
            var data = getData();
            var result = getTextArea();
            for (var i=0,l=result.length;i<l;i++)
            {
                var input = result[i];
                if(!isNaN(input))
                {
                    data.push(input);
                }
            }
            render(data);
        }
        btnArray[2].onclick = function()
        {
            var data = getData();
            data.shift();
            render(data);
        }
        btnArray[3].onclick = function()
        {
            var data = getData();
            data.pop();
            render(data);
        }
        btnArray[4].onclick = function()
        {
            var tryData = getData();
            var data = getNewData(tryData);
            var input = document.getElementsByTagName("input")[0].value;
            var myArray=[];
            for (var i=0,l=data.length;i<l;i++)
            {
                var s = data[i].replace(input,startStr+input+endStr);
                myArray.push(s);
            }
            console.log(myArray);
            render(myArray);
        }
    }
</script>
</body>
</html>